<!--<!DOCTYPE html>-->
<html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>
        <link rel="stylesheet" href="css/regist.css">
        <!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>-->
        <script src="js/jquery-3.3.1.min.js" charset="UTF-8"></script>
        <script>
            /*
                表单校验：
                    1. 用户名：单词字符，长度8-20位
                    2. 密码：单词字符，长度8-20位
                    3. email：邮箱格式
                    4. 姓名：非空
                    5. 手机号：手机号格式
                    6. 出生日期：非空
                    7. 验证码：非空
             */

            //校验用户名
            function checkUsername() {
                // alert("校验用户名")
                //1.获取用户名值
                var username = $("#username").val();
                //2.定义正则
                var reg_username = /^\w{8,20}$/;

                //3.判断，给出提示信息
                var flag = reg_username.test(username);
                if (flag) {
                    //用户名合法
                    $("#username").css("border", "");
                    $("#eemsg").html("");
                } else {
                    //用户名非法
                    $("#username").css("border", "1px solid red");
                    $("#eemsg").html("用户名不合法，要求单词字符，长度8-20位");
                }
                return flag;
            }

            //校验密码
            function checkPassword() {
                //1.获取密码的值
                var password = $("#password").val();
                //2.定义正则
                var reg_password = /^\w{8,20}$/;

                //3.判断，给出提示信息
                var flag = reg_password.test(password);
                if (flag) {
                    //密码合法
                    $("#password").css("border", "");
                    $("#eemsg").html("");
                } else {
                    //密码非法
                    $("#password").css("border", "1px solid red");
                    $("#eemsg").html("密码不合法，要求单词字符，长度8-20位");
                }
                return flag;
            }

            //校验邮箱
            function checkEmail() {
                //1.获取邮箱的值
                var email = $("#email").val();
                //2.定义正则
                var reg_email = /^\w+@\w+\.\w+$/;
                //3.判断，给出提示信息
                var flag = reg_email.test(email);
                if (flag) {
                    $("#email").css("border", "");
                    $("#eemsg").html("");
                } else {
                    $("#email").css("border", "1px solid red");
                    $("#eemsg").html("邮箱格式不合法");
                }
                return flag;
            }

            //校验姓名
            function checkName() {
                //1.获取姓名的值
                var realname = $("#realname").val();
                //2.判断，给出提示信息
                var flag = true;
                if (realname.length == 0) {
                    $("#realname").css("border", "1px solid red");
                    $("#eemsg").html("不能为空");
                    flag = false;
                } else {
                    $("#realname").css("border", "");
                    $("#eemsg").html("");
                    flag = true;
                }

                return flag;

            }

            //校验手机号
            function checkTelephone() {
                //1.获取手机号码
                var telephone = $("#telephone").val();
                //2.定义正则手机号格式
                var reg_tel = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
                //3.判断，给出提示信息
                var flag = reg_tel.test(telephone);
                if (flag) {
                    $("#telephone").css("border", "");
                    $("#eemsg").html("");
                } else {
                    $("#telephone").css("border", "1px solid red");
                    $("#eemsg").html("手机号码格式不合法");
                }
                return flag;
            }


            $(function () {
                //当表单提交时，调用所有的校验方法
                $("#registerForm").submit(function () {
                    //1.发送数据到服务器
                    // if(checkUsername()&&checkPassword()&&checkEmail()&&checkName()&&checkBirth()&&checkCode()&&checkTelephone()){
                    // if (checkUsername() && checkPassword() && checkEmail()&& checkTelephone()&&checkName()) {
                    if(checkUsername()&&checkPassword()&&checkEmail()&&checkTelephone()&&checkName()){
                        // alert("1111")
                        // return  true;
                        // 校验通过，发送ajax请求，提交表单数据 username=zhangsan&&password=111
                        $.post("user/regist", $(this).serialize(), function (data) {
                            //处理服务器响应数据 data {flag:false,errorMsg:“注册失败”}
                            if (data.flag) {
                                //注册成功，跳转成功页面
                                location.href = "register_ok.html";
                            } else {
                                //注册失败,给errormsg添加提示信息
                                $("#eemsg").html(data.errorMsg);
                            }
                        });
                    }
                    //2.跳转页面
                    return false;
                    //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
                });

                //当某一个组件失去焦点时，调用对应的校验方法
                $("#username").blur(checkUsername);
                $("#password").blur(checkPassword);
                $("#email").blur(checkEmail);
                $("#realname").blur(checkName);
                $("#telephone").blur(checkTelephone);


            });
        </script>
    </head>
    <body>

        <form action="user" class="regist-form" id="registerForm" >

            <!--注册错误提示消息-->
            <div id="errorMsg" style="color: red;text-align: center"></div>
            <h1>注册</h1>

            <input type="hidden" name="action" value="regist"/>
            <div class="txtb">
                <div>Username</div>
                <input type="text" name="username" id="username" autocomplete="off">
                <span data-placeholder="Username"></span>
            </div>

            <div class="txtb">
                <div>Password</div>
                <input type="password" name="password" id="password" autocomplete="off">
                <span data-placeholder="Password"></span>
            </div>

            <div class="txtb">
                <div>Email</div>
                <input type="text" name="email" id="email" autocomplete="off">
                <span data-placeholder="Email"></span>
            </div>
            <div class="txtb">
                <div>Name</div>
                <input type="text" name="realname" id="realname" autocomplete="off">
                <span data-placeholder="Realname"></span>
            </div>
            <div class="txtb">
                <div>Phonenumber</div>
                <input type="text" name="telephone" id="telephone" autocomplete="off">
                <span data-placeholder="Telephone"></span>
            </div>
            <div class="checkbb">
                <div>sex</div>
                <input type="radio" id="sex" name="sex" value="male" checked> male
                &nbsp;&nbsp;
                <input type="radio" name="sex" value="female"> female
            </div>

            <div class="txtb">
                <div>Bitthday</div>
                <input type="date" id="birthday" name="birthday" autocomplete="off">
                <span data-placeholder="Bitthday"></span>
            </div>
            <input type="submit" class="logbtn" value="注册">
            <span id="eemsg" style="color: red;"></span>

            <div class="button-text">
                已有账号？<a href="login.html"> 立即登录 </a>
            </div>

        </form>

        <script type="text/javascript">
            $(".txtb input").on("focus", function () {
                $(this).addClass("focus");
            });

            $(".txtb input").on("blur", function () {
                if ($(this).val() == "")
                    $(this).removeClass("focus");
            });
        </script>


    </body>
</html>